<template>
  <!-- 整个的顶部导航栏 -->
  <div class="nav-box">
    <!-- 上面的div -->
    <div class="top-bar">
      <!-- 左边的标题 -->
      <div class="left-title"><span class="site-title">马士兵金融</span></div>
      <!-- 右边的标题 -->
      <!-- v-if的判断是在没有token的时候去显示 -->
      <div v-if="!hasToken" class="right-menu">
        <!-- 使用router-link实现页面的跳转 -->
        <router-link :to="{ path: '/register' }"><span>注册</span></router-link>
        <router-link :to="{ path: '/login' }"><span>登录</span></router-link>
      </div>
      <div v-else class="right-menu">
        <span>{{name}}</span>
        <router-link :to="{ path: '/login' }"
          ><el-dropdown>
            <span class="el-dropdown-link"
              >个人中心<i class="el-icon-arrow-down el-icon--right"></i
            ></span>
            <el-dropdown-menu slot="dropdown">
              <router-link :to="{ path: '/dashboard' }"
                ><el-dropdown-item>我的账号</el-dropdown-item></router-link
              >
              <el-dropdown-item @click.native="logout">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </router-link>
      </div>
    </div>
    <!-- 下面的菜单div -->
    <div class="menu-bar">
      <el-menu
        text-color="#000"
        active-text-color="#ffd04b"
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
      >
        <el-menu-item index="0">首页</el-menu-item>
        <el-menu-item index="1">我要借款</el-menu-item>
        <el-menu-item index="2">我要投资</el-menu-item>
        <!-- 当有token的时候储存显示出来 -->
        <el-menu-item v-if="hasToken" index="3">我的账号</el-menu-item>
      </el-menu>
    </div>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import { mapGetters } from "vuex";

export default {
  props: ["activeIndex"],
  data() {
    return {
      // activeIndex: "0", // 加上默认值
      path_list: [
        "/", // 首页
        "/loanapply", // 申请借款
        "/invest", // 投资
        "/dashboard", //我的账户
      ], // 跳转列表的路由
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      const path = this.path_list[key]; // 获取索引
      console.log("当前要跳转的页面是", path);
      this.$router.push({ path: path }); // 使用$rount.push进行跳转,根据索引来进行跳转
    },
    async logout() {
      await this.$store.dispatch("user/logout");
      this.$router.push(`/login?redirect=${this.$route.fullPath}`);
    },
  },
  computed: {
    // 要绑定到动态计算属性,mapActions是映射到方法
    ...mapGetters([
      // 从getter.js的文件夹中取出我们想拿到的数据
      "name",
    ]),
    // 判断是否有token
    hasToken() {
      // 计算属性是一个方法，在里面去返回定制化的内容，到时候可以用方法名，当成一个属性来使用
      return getToken();
    },
  },
};
</script>

<style lang="scss" scoped>
// 利用嵌套的方式进行css样式修改
.nav-box {
  background-color: #cc0000; // 背景颜色为红色
  color: white; // 字体颜色为白色
  .top-bar {
    display: flex; // 弹性布局
    justify-content: space-between; // 弹性项目以均匀的间距放置在项目被推到开始和最后一个项目被推到结束的地方
    padding: 0px 15px; // 上下是0px 离左边和右边是15px
    height: 40px; // 调节高低
    align-items: center; // 调节字体（马士兵金融，注册和登录）的高低为中间
    .right-menu {
      span {
        margin: 0px 8px; // 设置注册和登录两个间距
      }
      .el-dropdown-link {
        cursor: pointer;
        color: white;
      }
    }
    .left-title {
      .site-title {
        font-size: 22px; // 设置马士兵金融的字体大小
      }
    }
  }
  .menu-bar {
    border: 1px solid #e6e6e6; // 一条白色的实线（设置边框）
  }
}
</style>
